<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}

    <style>
        thead tr th {
            text-align: center;
        }

        tbody tr td {
            text-align: center;
        }
        .gift-record select,.gift-record input{
            display: inline-block;
            width: 44%;
            float: left;
        }
        .gift-record input{
            margin-left:5px;
        }
        .form-control {
            background-color: #FFFFFF;
            border: 1px solid #E3E3E3;
            border-radius: 4px;
            color: #565656;
            padding: 7px 12px;
            font-size: 12px;
            height: 38px;
            max-width: 100%;
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            transition: all 300ms linear;
        }
        .addcord{
            padding: 0;
            margin-top: 5px;
        }
        .form1 a{
            color: #2db7f5;
            line-height: 35px;
            display: inline-block;
            margin: 0 5px;
        }
    </style>

</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section id="content">
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ol class="breadcrumb">
                <li>当前位置是:</li>
                <li><a href="javascript:history.back();">会员卡管理</a></li>
                <li class="active" style="color: #02b87f;">跟随推荐</li>
            </ol>
        </div>
        <div class="alert alert-success" style="background-color: rgba(204, 228, 223, 0.3);margin: 5px 10px 5px 10px;">
            <strong>
                <i class="ti-info-alt"></i>
            </strong>
            重新设置规则后，会替换现有的跟随推荐规则。
            <a href="{:url('cardus/getlists')}" target="_blank" class="btn-link" style="margin-top: 0px;display:inline-block;font-size:14px;">返回会员列表</a>

        </div>
        <div class="panel-body">
            <div class="panel-heading addCharts" style="background:#ededed;"> 跟随推荐列表</div>
            <table class="table table-bordered table-hover table-striped" data-toolbar="#toolbar">
                <thead>
                <tr>
                    <th data-type="1">活动结束时间</th>
                    <th data-type="2">发放卡券</th>
                </tr>
                </thead>
                <tbody>
                {volist name="list" id="vo"}
                <tr>
                    <td>{$vo.end_time|date="Y-m-d H:i",###}</td>
                    <td>{:getpaygive($vo['card_id_list'])}</td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
        <div class="panel panel-default mgl15 mgr15">
            <div class="panel-heading addCharts" style="background:#ededed;"> 设置</div>
            <form class="form-horizontal" id="test">
                <input type="hidden" name="card_id" value="{$card['card_id']}">
                <div class="panel-body">
                    <div class="form-horizontal" data-label="活动时间"
                         data-layout="horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">活动结束时间</label>
                            <div class="col-sm-10">
                                <input name="end_time" type="text" value="" readonly="readonly" id="give_date" class="form-control" placeholder="请选择活动结束时间" style="">
                                <div class="r-message text-danger"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label class="col-xs-12 col-sm-3 col-md-2 control-label "><span class="text-danger">*</span> 选择要赠送的卡券</label>
                        <div class="col-xs-10 col-sm-10 col-md-10 form1" >
                            <div class="gift-record"id="sel1">
                                <select name="card_arr[zs_card_id][]"  class="form-control cardsel" id="opt">
                                    <option value="">--请选择--</option>
                                </select>
                                <input type="number" class="form-control"min="1"placeholder="请填写"value="1"name="card_arr[zs_no][]"data="num"id="num">
                            </div>
                            <a href="javascript:;"  data-counts="1" id="datacount" style="color: #2db7f5;">添加赠送</a>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <button class="btn btn-success" onclick="putfirecard()" type="button">保存</button>
                </div>
            </form>

        </div>
        {include file='public/footer'/}
    </div>


</section>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script>
    laydate.render({
        elem: '#give_date'
        ,type: 'datetime'
    });
</script>
<script>
    $(function(){
        $.ajax({
            url: "{:url('cards/getcardlist')}",
            type:"post",
            data: {
            },
            success: function (data) {

                var text =data.data;
                //console.log(text);
                var option2="";
                for(var i=0; i<text.length; i++){
                    // console.log(text[i].card_id);

                    option2 +='<option value="'+text[i].card_id+'" data-title="'+text[i].title+' "data-limit="'+text[i].get_limit+'">'+text[i].title+'  ( 最大可选卡券数量为'+text[i].get_limit+' )</option>\n'

                }
                $('#sel1').find("select").append(option2);
                $("#opt").change(function(){

                    limit=parseInt($("#sel1").find("option:selected").attr("data-limit"));
                    var nu=parseInt($("#num").val());

                    $("#num").attr("max",limit);
                    //console.log(333333,limit);




                });

                $("#datacount").click(function(){


                    datacount=$(this).attr('data-counts');
                    get_limit=parseInt($("#sel"+datacount).find("option:selected").attr("data-limit"));
                    num=parseInt($("#sel"+datacount).find("input").val());
                    val=$("#sel"+datacount).find("option:selected").val();
                    if( $("#sel"+datacount).find("option:selected").val()==""){
                        alert("卡券选项不能为空");
                        return;
                    }
                    else if(num>get_limit){
                        console.log(num,get_limit);
                        console.log(num>get_limit);
                        alert("你选择的卡券数量超过了该卡券的领取数量!");
                        return;
                    }
                    else{

                        datacount2=parseInt(datacount)+1;
                        $(this).attr('data-counts',datacount2);
                        var html1 ='                        <div class="col-xs-12 col-sm-12 col-md-12 addcord" >\n' +
                            '                            <div class="gift-record"id="sel'+datacount2+'">\n' +
                            '                                <select name="card_arr[zs_card_id][]"  class="form-control" >\n' +
                            '                                    <option value="" selected="selected">--请选择--</option>\n' ;

                        var html3= '                                </select>\n' +
                            '                                <input type="number" class="form-control" min="1" placeholder="请填写" value="1" name="card_arr[zs_no][]">\n' +
                            '                            </div>\n' +
                            '                             <a href="javascript:;" onclick="delsel(this)">删除</a>\n' +
                            '                    </div>';

                        $('.form1').append(html1+option2+html3);

                        $("#sel"+datacount2).find("select").change(function(){

                            limit=$("#sel"+datacount2).find("option:selected").attr("data-limit");
                            $("#sel"+datacount2).find("input").attr("max",limit);



                        });

                    }




                })
            }
        })


    })
</script>
<script>
    function putfirecard(){


        var give_date=$("#give_date").val();
        var va=$("#opt").val();
        var items = $('.form1 select'),
            len = items.length,
            i = 0,
            valMap = {},
            sel,
            val;

        // 遍历并保存各个下拉列表的值于valMap
        for(; i < len; i++){
            sel = items[i];
            val = sel.options[sel.selectedIndex].value;

            // 没有相同的取值时保存该值，否则返回false
            if(!valMap[val]){
                valMap[val] = 1;

            }else{
                layer.alert('请删除重复的卡券！');
                return false;
            }

        }
        if(give_date==""){
            layer.alert("活动结束时间不能为空！");
            return false;
        }
        if(va==""){
            layer.alert(" 请选择卡券！");
            return false;
        }

        $.ajax({
            url: "{:url('cardus/bonusbizcardsadd')}",			//提交事件
            type: "post",						//方式
            dataType: "JSON",				//类型
            data: $("#test").serializeArray(),		//表单ID
            success: function(data) {			//接收返回值
                console.log(data);
                if(data.code==0){
                    layer.alert(data.message);
                    setTimeout("window.location.reload()",1000)
                }else{
                    layer.alert(data.message);
                }

            }
        });
    }



</script>
<script>

</script>
<script>

</script>
<script>

    function delsel(obj){
//
        $(obj).parent().remove();


    }

</script>
</body>

</html>
